<div class="relative " on:click={forward}>
    <div class="absolute bg-black inset-px" style="transform-origin: 50% 50% 0px; border-radius: 4.1958% / 16.6667%;">
    </div>
    <div class="relative text-sm border cursor-pointer"
      style="height: 38px; background-color: rgb(0, 0, 0); border-color: rgb(0, 0, 0); transform-origin: 50% 50% 0px; border-radius: 4.13793% / 15.7895%;">
      <span class="absolute inset-0 flex items-center justify-center text-white font-medium" style="opacity: 1;">

        <span style="transform-origin: 49.9509% 100% 0px;">{title}</span>

      </span></div>
  </div>

<script lang="ts">
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();

    function forward(event) {
        dispatch('click', event.detail);
    }
    export let title = ""
</script>